﻿body {
}

ul
{
    /*border:1px solid;*/
    background-color: #eff8ff;
    list-style:none; /* remove bulets */
    width:150px;
    margin:0; /* put all in vertical list position */
    padding:0;
}

ul li
{
    position:relative;
    width:148px;
    border:1px solid blue;
} 

li ul
{
    position:relative;
    /* hide sub menu items */
    /*display:none; */
}

li ul li
{
    /* put some space before */    
    padding-left:7px;/*border-left:8px solid blue;*/
    width:140px;
}    

/* Styles for Menu Items */
ul li a
{
    color:Blue;
    background-color: #eff8ff;
    text-decoration:none;
    padding:0 5px 0 5px;
    display:block;
} 

/* set dropdown to default */
li:hover li a, li.over li a {
    color: Blue;
    background-color: #eff8ff;
}

/* this sets all hovered lists to red */
li a:hover,
li:hover a, li.over a,
li:hover li a:hover, li.over li a:hover {
   color: #fff;
   background-color: #578cab;
}

li ul li  {  } /* Sub Menu Styles */
li.on ul { display:block} /* The magic */
li.off ul {display:none}